<%@ page contentType="text/html; charset=UTF-8" %>

<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/WEB-INF/tld/extend.tld" prefix="extend"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	
	<head>		
		<title>乐盈培训网</title>
		<link href="<extend:contextPath name="contextPath"/>/css/style.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
					
			.undis {
				DISPLAY: none;
			}
			.dis {
				DISPLAY: block;
			}
			
			.menu_current {
				background: url("../images/a_hover_edit_icon.gif") no-repeat ;
			}
			
			#hot_course {
				height:175px; 
				width:320px; 
				margin-left:0px; 
				margin-right:2px; 
				margin-top:4px; 
				margin-bottom:0px; 
				border: 1px solid #F9C14A; 				
				background: url("images/div_top.jpg") no-repeat 0 0 ;
				background-position: top;
			}
			
			#recommend_course {
				height:242px; 
				width:310px; 
				margin-left:0px; 
				margin-right:0px; 
				margin-top:4px; 
				margin-bottom:0px; 
				border: 1px solid #F9C14A; 				
				background: url("images/div_top.jpg") no-repeat 0 0 ;
				background-position: top;
			}
			
			#hot_course_2 {
				height:243px; 
				width:310px; 
				margin-left:0px; 
				margin-right:0px; 
				margin-top:7px; 
				margin-bottom:0px; 
				border: 1px solid #F9C14A; 				
				background: url("images/div_top.jpg") no-repeat 0 0 ;
				background-position: top;
			}
			
			#location {
				height:32px; 
				width:443px; 
				padding-top:2px;
				background: url("images/center_div_top.jpg") no-repeat 0 0 ;
			}
			
			.hover_tab{
				background:url("images/biaoti_beijing_hover.jpg") no-repeat ;
				background-position:center;
				width:73px;
				height:21px;
				text-align:center;
				display:block;
				line-height: 20px;						
			}
			
			.normal_tab{
				background:url("images/biaoti_beijing.jpg") no-repeat ;
				background-position:center;
				width:73px;
				height:20px;
				text-align:center;
				display:block;
				line-height: 20px;				
			}
			
			#teacher_index li a {
				background:url(images/teacher_index_bg.jpg) no-repeat; 				
				height:26px;
				text-align:center;
				display:block;
				text-decoration:none; 
				line-height:26px;
				width:76px;
				color:black;
			}		
			a{
			
			}
		</style>
		<script language="JavaScript" src="<extend:contextPath name="contextPath"/>/scripts/jquery.js"></script>
		<script language="JavaScript" src="<extend:contextPath name="contextPath"/>/scripts/common.js"></script>
	</head>		
	
	<script>
	function goTeacherPage()
	{
		window.location = '<extend:contextPath name="contextPath"/>/teacher/viewAllTeacher.do?method=viewAllTeacher';
	}
	</script>
	
	<body>
				
		<div style="position:absolute; height:100%; width:1045px;">
				
			<jsp:include page="header.jsp"></jsp:include>
			
			<div id="main" style="float:left; height:495px; width:1045px; margin-top:4px;">
				<div id="left" style="DISPLAY: inline; FLOAT: left;  
									height:490px; width:327px; margin-left:0px; margin-top:4px; margin-bottom:0px;">
					<div id="picture" style="height:300px; width:320px; margin-left:0px; margin-right:2px; margin-top:0px; border: #D9D9D9 1px solid;">
						<div id="bigPic">
							<img src="<extend:contextPath name="contextPath"/>/images/top_ren.jpg" alt="" />
							<img src="<extend:contextPath name="contextPath"/>/images/recommendteacher.jpg" alt="" />
							<img src="<extend:contextPath name="contextPath"/>/images/newLogo.jpg" alt="" />
						</div>
						<ul id="thumbs">
							<li class='active' rel='1'><img src="<extend:contextPath name="contextPath"/>/images/edit_icon.gif" alt="" /></li>
							<li rel='2'><img src="<extend:contextPath name="contextPath"/>/images/dagou.bmp" alt="" /></li>
							<li rel='3'><img src="<extend:contextPath name="contextPath"/>/images/delete_icon.gif" alt="" /></li>
						</ul>
					</div>
					
					<div id="hot_course">
						<table cellpadding="0" cellspacing="0" style="padding-top:0px;">
							<tr>
								<td valign="center" height="28" align="left" style="padding-left:8px; font-size:13px;">
									<img src="<extend:contextPath name="contextPath"/>/images/quanquan.jpg"/><font style="size:12px; color:E56213"><b>热门培训课程</b></font>
								</td>
							</tr>
							
							<tr>
								<td>
									<ul style="font-size:12px;margin:0px; padding:5px 0px 0px 8px; list-style:none outside none">
										<c:forEach items="${hotCourse}" var="item">
											<li style="height:21px;">·
												<a class="normal_link" target="_blank" 
													href="<extend:contextPath name='contextPath'/>/course/viewCourseDetail.do?method=viewCourseDetail&courseId=<c:out value="${item.courseId}"/>">
													<c:out value="${item.courseTitle}"/>
												</a></li>											
										</c:forEach>
									</ul>
								</td>
							</tr>												
						</table>						
					</div>
				</div>
				
				<div id="center" style="display:inline; float:left; height:482px; width:443px; 
											margin-left:1px; margin-top:4px; border: #D9D9D9 1px solid;">
					<div id="location">
						<ul id="location_ul" style="margin:0px; padding:0px 0px 0px 35px; list-style:none; font-size:13px;">
							<li style="padding-left:20px; PADDING-RIGHT: 30px; DISPLAY: inline; FLOAT: left; PADDING-top: 2px">
								<a id="tb_0" href="111" class="hover_tab" onmouseover="HoverLic(0)">北京</a>
							</li>
							<li style="padding-left:20px; PADDING-RIGHT: 30px; DISPLAY: inline; FLOAT: left; PADDING-TOP: 2px">
								<a id="tb_1" href="111" class="normal_tab" onMouseOver=HoverLic(1)>上海</a>
							</li>	
							<li style="padding-left:20px; PADDING-RIGHT: 30px; DISPLAY: inline; FLOAT: left; PADDING-TOP: 2px">
								<a id="tb_2" href="111" class="normal_tab" onMouseOver=HoverLic(2)>深圳</a>
							</li>				
						</ul>
					</div>
					
					<script type="text/javascript">
					function g(o)
					{
						return document.getElementById(o);
					} 
					function HoverLic(n)
    				{   		     				
     					for(var i=0;i<3;i++)
						{						
							$('#tbc_'+i)[0].className='undis';
							$('#tb_'+i)[0].className='normal_tab';		
						}																		
						$('#tbc_'+n)[0].className='dis';
						$('#tb_'+n)[0].className='hover_tab';
    				}	
					</script>
					
					<div id="tbc_0">
						<table width="418" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size:13px;">
							<tr bgcolor="#FFF0D1">
								<td height="22" align="center">标题</td>
								<td width="38" height="22" align="center">课时</td>
								<td width="70" height="22" align="center">时间</td>
								<td width="50" height="22" align="center">价格</td>
							</tr>
							<tr>
                    			<td height="5"></td>
                  			</tr>
                  			
                  			<c:forEach items="${courseBJ}" var="item">
                  				<tr>
									<td align="left" height="23">
										<a class="normal_link" target="_blank"
											href="<extend:contextPath name='contextPath'/>/course/viewCourseDetail.do?method=viewCourseDetail&courseId=<c:out value="${item.courseId}"/>">
											<c:out value="${item.courseTitle}"/>
										</a>
									</td>
									<td align="center"><c:out value="${item.coursePeriod}"/></td>
									<td align="center"><c:out value="${item.courseStartTimeAsStr}"/></td>
									<td align="center"><c:out value="${item.coursePrice}"/>￥</td>
								</tr>
                  			</c:forEach>
						</table>
					</div>
					<div id="tbc_1" class="undis">
						<table width="418" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size:13px;">
							<tr bgcolor="#FFF0D1">
								<td height="22" align="center">标题</td>
								<td width="38" height="22" align="center">课时</td>
								<td width="70" height="22" align="center">时间</td>
								<td width="50" height="22" align="center">价格</td>
							</tr>
							<tr>
                    			<td height="5"></td>
                  			</tr>
                  			<c:forEach items="${courseShangHai}" var="item">
                  				<tr>
									<td align="left" height="23">
										<a class="normal_link" target="_blank"
											href="<extend:contextPath name='contextPath'/>/course/viewCourseDetail.do?method=viewCourseDetail&courseId=<c:out value="${item.courseId}"/>">
											<c:out value="${item.courseTitle}"/>
										</a>
									</td>
									<td align="center"><c:out value="${item.coursePeriod}"/></td>
									<td align="center"><c:out value="${item.courseStartTimeAsStr}"/></td>
									<td align="center"><c:out value="${item.coursePrice}"/>￥</td>
								</tr>
                  			</c:forEach>						
						</table>
					</div>
					
					<div id="tbc_2" class="undis">
						<table width="418" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size:13px;">
							<tr bgcolor="#FFF0D1">
								<td height="22" align="center">标题</td>
								<td width="38" height="22" align="center">课时</td>
								<td width="70" height="22" align="center">时间</td>
								<td width="50" height="22" align="center">价格</td>
							</tr>
							<tr>
                    			<td height="5"></td>
                  			</tr>
                  			<c:forEach items="${courseShenZhen}" var="item">
                  				<tr>
									<td align="left" height="23">
										<a class="normal_link" target="_blank"
											href="<extend:contextPath name='contextPath'/>/course/viewCourseDetail.do?method=viewCourseDetail&courseId=<c:out value="${item.courseId}"/>">
											<c:out value="${item.courseTitle}"/>
										</a>
									</td>
									<td align="center"><c:out value="${item.coursePeriod}"/></td>
									<td align="center"><c:out value="${item.courseStartTimeAsStr}"/></td>
									<td align="center"><c:out value="${item.coursePrice}"/>￥</td>
								</tr>
                  			</c:forEach>						
						</table>
					</div>
					
				</div>
				
				
				<div id="right" style="overflow:hidden; float:left; height:490px; width:270px; margin-left:2px; margin-top:4px;">
					
					<c:if test="${loginName == null}">
					<div id="login" style="height:180px; width:263px; margin-left:4px; border:#CDBFF1 1px solid;">
						<div id="loginTitle" class="loginTitle">
							&nbsp;<b>会员登录</b>
						</div>
						<div id="loginDiv" style="margin-left:5px;">
							<form action="#" onsubmit="return false;">
								<table cellpadding="0" cellspacing="0" style="font-size:13px; margin-top:10px;" id="loginTable">
									<tr>
										<td height="35px">用户名：</td>
										<td>
											<input type="text" id="userName" class="form_field" style="width:140px;" value="<c:out value='${loginName_Cookie}'/>"/>
										</td>
									</tr>								
									<tr>
										<td height="35px">密&nbsp;&nbsp;&nbsp;码：</td>
										<td><input type="password" id="password" style="width:140px;" class="form_field"/></td>
									</tr>		
	          					</table>
	          					<table width="100%">
									<tr>
										<td colspan="2">  
											&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" class="button" onclick="login('<extend:contextPath name='contextPath'/>')" value="登  录" />&nbsp;&nbsp;&nbsp;&nbsp;
											<a class="normal_link" style="color:#3166CC;" href="<extend:contextPath name='contextPath'/>/register.do?method=initRegister">马上去注册</a>										
										</td>									
									</tr>
								</table>
							</form>								
						</div>
						<div id="busy" style="width:100%; height:110px; display:none;">
							<img style="padding-left:50px;" src="<extend:contextPath name='contextPath'/>/images/busy.gif" />
						</div>
						<div id="loginSuccess" style="display:none;width:100%; height:110px;">
							<div id="1" style="margin-left:20px; margin-top:15px; font-size:14px;">欢迎回来, </div>
							<div id="2" style="margin-left:20px; margin-top:15px; font-size:14px;">&gt;&gt;进入我的中心</div>
							<div id="3" style="margin-left:20px; margin-top:15px;">
								<input type="button" onclick="logout('<extend:contextPath name="contextPath"/>');" class="button" value="登出"/>
							</div>
						</div>
					</div>
					</c:if>
					
					<c:if test="${loginName != null}">
						<div id="login" style="height:180px; width:263px; margin-left:4px; border:#CDBFF1 1px solid;">
							<div id="loginTitle" class="loginTitle">
								&nbsp;<b>会员登录1111</b>
							</div>
							<div id="loginSuccess" style="dwidth:100%; height:110px;">
								<div id="1" style="margin-left:20px; margin-top:15px; font-size:14px;">欢迎回来, <c:out value="${loginName}" /></div>
								<div id="2" style="margin-left:20px; margin-top:15px; font-size:14px;">
									&gt;&gt;<a class="normal_link" style="color:#3166CC;" href="<extend:contextPath name="contextPath"/>/mypage.do?method=mypage">进入我的中心</a>
								</div>
								<div id="3" style="margin-left:20px; margin-top:15px;">
									<input type="button" onclick="logout('<extend:contextPath name="contextPath"/>');" class="button" value="登出"/>
								</div>
							</div>
						</div>
					</c:if>
					
					
					<div id="other" style="border:#D9D9D9 1px solid; height:295px; width:264px; margin-left:4px; margin-top:5px;">
					</div>
					
				</div>
			</div>
					
			<div id="teacher_index" style="overflow:hidden; float:left; font-size:12px; padding-top:2px;
						height:26px; width:1044px; margin-left:0px; margin-right:0px; margin-top:0px; border: #D9D9D9 1px solid;">
				<ul style="margin:0 0 0 0; padding:0; list-style:none;">
					<li style="display:inline; float:left; margin-right:6px;"><img src="<extend:contextPath name="contextPath"/>/images/recommendteacher.jpg" /></li>
					
					<c:forEach items="${courseCategory}" var="item">
						<li style="display:inline; float:left; margin-right:6px;">
							<a href="#" onclick="javascript:getTeacherList('<extend:contextPath name="contextPath"/>', '<c:out value="${item}" />')">
								<c:out value="${item}" />
							</a>
						</li>
					</c:forEach>										
					<li style="float:right; margin-right:20px; margin-top:5px;">
						<img src="<extend:contextPath name="contextPath"/>/images/mores.gif" onclick="goTeacherPage()"/>
					</li>					
				</ul>
			</div>					
					
			<div id="teacher" style="overflow:hidden; float:left; border-right:#D9D9D9 1px solid; border-left:#D9D9D9 1px solid; 
										border-bottom:#D9D9D9 1px solid; WIDTH:1044px; height:260px;">
				<ul style="width:1000px; margin-top:10px;">
					<c:forEach items="${teacherList}" var="item">
                  		<li style="display:inline; float:left; margin:0px 10px 10px; width:310px">
							<table width="296" border="0" cellpadding="0" cellspacing="0"	>
            	  				<tr>
            	  					<td height="120px" valign="top" width="93">
            	  						<a target="_blank" href="<extend:contextPath name="contextPath"/>/teacher/viewTeacherDetail.do?method=viewTeacher&teacherId=<c:out value='${item.teacherId}'/>">
            	  							<img height=107px width=87px src="<c:out value='${item.teacherImagePath}'/>" border="0"/>
            	  						</a>
            	  					</td>
            	  					<td width="200" style="font-size:12px; line-height:20px;"><strong><c:out value='${item.teacherName}'/></strong> 讲师<br />
            	    　　						<c:out value='${item.teacherDesc}'/><br />
            	    					<a href="<extend:contextPath name="contextPath"/>/teacher/viewTeacherDetail.do?method=viewTeacher&teacherId=<c:out value='${item.teacherId}'/>" 
            	    						target="_blank">
            	    						<img src="<extend:contextPath name="contextPath"/>/images/view.gif" width="100" height="20" border="0" /></a>
            	    				</td>
            	  				</tr>
            	  			</table>
            	  		</li>
                  	</c:forEach>	
				</ul>
			</div>		
			
			<div id="course" style="float:left; width:1045px; height:505px; margin-top:3px;">
				<div style="display:inline; float:left; width:315px;">
					<div id="recommend_course">
						<table cellpadding="0" cellspacing="0" style="padding-top:0px;">
							<tr>
								<td height="28" align="left" style="padding-left:8px;">
									<font style="size:12px; color:E56213"><b>培训课程推荐</b></font>
								</td>
							</tr>							
							<tr>
								<td>
									<ul style="font-size:13px;margin:0px; padding:5px 0px 0px 8px; list-style:none outside none">
										<c:forEach items="${recommendedCourse}" var="item">
											<li style="height:21px;">·
												<a class="normal_link" target="_blank"
														href="<extend:contextPath name='contextPath'/>/course/viewCourseDetail.do?method=viewCourseDetail&courseId=<c:out value="${item.courseId}"/>">
													<c:out value="${item.courseTitle}"/>
												</a>
											</li>											
										</c:forEach>
									</ul>
								</td>
							</tr>												
						</table>
					</div>
					<div id="hot_course_2">
						<table cellpadding="0" cellspacing="0" style="padding-top:0px;">
							<tr>
								<td height="28" align="left" style="padding-left:8px; font-size:13px;">
										<font style="size:12px; color:E56213"><b>热门培训课程</b></font>
								</td>
							</tr>							
							<tr>
								<td>
									<ul style="font-size:13px;margin:0px; padding:5px 0px 0px 8px; list-style:none outside none">
										<c:forEach items="${hotCourse2}" var="item">
											<li style="height:21px;">·
												<a class="normal_link" target="_blank" 
													href="<extend:contextPath name='contextPath'/>/course/viewCourseDetail.do?method=viewCourseDetail&courseId=<c:out value="${item.courseId}"/>">
													<c:out value="${item.courseTitle}"/>
												</a>
											</li>											
										</c:forEach>																												
									</ul>
								</td>
							</tr>												
						</table>
					</div>
				</div>
				
				<div id="cat_list" style="margin-left:0px; margin-top:4px; float:right; 
									overflow:hidden; WIDTH: 725px; height:505px; font-size:13px;">					
					<ul style=" margin:0px; padding:0px 0px 0px 0px; list-style-type:none;">						
						<c:forEach var="item" items="${map}" varStatus="status">
							<c:if test="${status.index%2 == 0}">
								<li style="display:inline; FLOAT: left; MARGIN-BOTTOM: 1px; WIDTH: 360px; MARGIN-RIGHT: 5px; HEIGHT: 162px">
									<div class="category_course">
										<table cellpadding="0" cellspacing="0" style="padding-top:0px;">
											<tr>
												<td height="28" align="left" style="padding-left:8px; font-size:13px;"><b><c:out value="${item.key}" /></b></td>
											</tr>
											
											<c:forEach var="course" items="${item.value}">
												<tr>
													
													<td align="left" width="283px" height="22">&nbsp;·
														<a target="_blank" class="normal_link" 
															href="<extend:contextPath name='contextPath'/>/course/viewCourseDetail.do?method=viewCourseDetail&courseId=<c:out value="${course.courseId}"/>">
															<c:out value="${course.courseTitle}" />
														</a>
													</td>
													<td align="right" width="68px">
														<c:out value="${course.courseStartDtAsStr}" />&nbsp;
														<c:out value="${course.courseCity}" />
													</td>
												</tr>
											</c:forEach>
										</table>
									</div>
								</li>
							</c:if>
							
							<c:if test="${status.index%2 == 1}">
								<li style="DISPLAY: inline; FLOAT: left; MARGIN-BOTTOM: 5px; WIDTH: 360px; MARGIN-RIGHT: 0px; HEIGHT: 162px">
									<div class="category_course">
										<table cellpadding="0" cellspacing="0" style="padding-top:0px;">
											<tr>
												<td height="28" align="left" style="padding-left:8px; font-size:13px;"><b><c:out value="${item.key}" /></b></td>
											</tr>		
											<c:forEach var="course" items="${item.value}">
												<tr>
													<td align="left" width="283px" height="22">&nbsp;·
														<a target="_blank" class="normal_link" 
															href="<extend:contextPath name='contextPath'/>/course/viewCourseDetail.do?method=viewCourseDetail&courseId=<c:out value="${course.courseId}"/>">
															<c:out value="${course.courseTitle}" />
														</a>
													</td>
													<td align="right" width="68px">
														<c:out value="${course.courseStartDtAsStr}" />&nbsp;
														<c:out value="${course.courseCity}" />
													</td>
												</tr>
											</c:forEach>					
										</table>
									</div>
								</li>
							</c:if>
						</c:forEach>												
					</ul>					
				</div>	
											
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
						var currentImage;
					    var currentIndex = -1;
					    var interval;
					    function showImage(index){
					        if(index < $('#bigPic img').length){
					        	var indexImage = $('#bigPic img')[index]
					            if(currentImage){   
					            	if(currentImage != indexImage ){
					                    $(currentImage).css('z-index',2);
					                    clearTimeout(myTimer);
					                    $(currentImage).fadeOut(250, function() {
										    myTimer = setTimeout("showNext()", 3000);
										    $(this).css({'display':'none','z-index':1})
										});
					                }
					            }
					            $(indexImage).css({'display':'block', 'opacity':1});
					            currentImage = indexImage;
					            currentIndex = index;
					            $('#thumbs li').removeClass('active');
					            $($('#thumbs li')[index]).addClass('active');
					        }
					    }
					    
					    function showNext(){
					        var len = $('#bigPic img').length;
					        var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
					        showImage(next);
					    }
					    
					    var myTimer;
					    
					    $(document).ready(function() {
						    myTimer = setTimeout("showNext()", 3000);
							showNext(); //loads first image
					        $('#thumbs li').bind('click',function(e){
					        	var count = $(this).attr('rel');
					        	showImage(parseInt(count)-1);
					        });
						});
					</script>
					
					
					
					<%-- local storage test part --%>
					
					<script>
						if(window.localStorage) {
							//alert(11);
						} else {
							alert(22);
						}
						//alert(localStorage);
						localStorage.setItem("key", "value");
						
					</script>
					
					<%-- local storage test part --%>
	
</html>